<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jstl/core" template="/_templates/generic.jsp">
	<ui:define name="windowTitle"><h:outputText value="#{newsManagedBean.windowTitle}" /></ui:define>
	<ui:define name="pageTitle"><h:outputText value="#{newsManagedBean.pageTitle}" /></ui:define>
	<ui:define name="searchContext">News<input type="hidden" name="searchContext" value="news" /></ui:define>
	
	<ui:define name="pageHeadStylesheet">
		<link href="#{request.contextPath}/resources/css/news.css" rel="stylesheet" type="text/css" />
	</ui:define>
	
	<ui:define name="mainContent">
		<table class="ThreeNewsWithMainImageContainer">
			<tr>
				<td colspan="3">
					<table class="ThreeNewsWithMainImageContent">
						<tr>
							<td class="MainImageContainer"><img id="TopNewsMainImage" src="#{newsManagedBean.dto.topNews[0].photo.url}" class="ThreeNewsImage" /></td>
							
							<td class="ThreeNewsContainer">
								<table class="ThreeNewsContainerTable">
									<c:forEach items="#{newsManagedBean.dto.topNews}" var="currentTopNews" varStatus="topStatus">
										<tr>
											<td class="ThreeNewsRow" onmouseover="updateTopNewsMainPhoto('${currentTopNews.photo.url}');">
												<c:if test="${topStatus.index == 1}">
													<span class="NewsTitleHeader" style="padding-top:8px;"><a href="javascript:goToNews('${currentTopNews.newsId}');">${currentTopNews.title}</a></span>
												</c:if>
												
												<c:if test="${topStatus.index > 1}">
													<span class="NewsTitleHeader"><a href="javascript:goToNews('${currentTopNews.newsId}');">${currentTopNews.title}</a></span>
												</c:if>
												
												<span class="BlockDisplay">${currentTopNews.description}</span>
											</td>
										</tr>
									</c:forEach>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		
		<table class="FiveNewsWithPictureAndMoreNewsTable">
			<tr>
				<td class="FiveNewsContainer">
					<c:forEach items="#{newsManagedBean.dto.midLeftNews}" var="currentMidLeftNews" varStatus="midLeftStatus">
						<div class="FiveNewsSection">
							<span class="NewsTitleHeader"><a href="javascript:goToNews('${currentMidLeftNews.newsId}');">${currentMidLeftNews.title}</a></span>
							<span class="BlockDisplay">${currentMidLeftNews.description}</span>
						</div>
					</c:forEach>
				</td>
				
				<td class="SingleNewsWithImageContainer">
					<img src="#{newsManagedBean.dto.midCenterNews.photo.url}" class="FiveNewsSingleNewsImage" />
					<span class="NewsTitleHeader" style="width:150px;"><a href="javascript:goToNews('#{newsManagedBean.dto.midCenterNews.newsId}');"><h:outputText value="#{newsManagedBean.dto.midCenterNews.title}" /></a></span>
					<span class="BlockDisplay" style="width:150px;"><h:outputText value="#{newsManagedBean.dto.midCenterNews.description}" /></span>
				</td>
				
				<td class="MoreNewsContainer">
					<c:forEach items="#{newsManagedBean.dto.midRightNews}" var="currentMidRightNews" varStatus="midRightStatus">
						<p><a href="javascript:goToNews('${currentMidRightNews.newsId}');" class="MoreNewsLink">${currentMidRightNews.title}</a></p>
					</c:forEach>
				</td>
			</tr>
		</table>
		
		<table class="ThreeColumnNewsWithImageTable">
			<tr>
				<c:forEach items="#{newsManagedBean.dto.bottomNews}" var="currentBottomNews1" begin="1" end="3" varStatus="bottom1Status">
					<td>
						<img src="${currentBottomNews1.photo.url}" class="ThreeColumnImage" />
						<span class="NewsTitleHeader"><a href="javascript:goToNews('${currentBottomNews1.newsId}');">${currentBottomNews1.title}</a></span>
						<span class="BlockDisplay" style="width:200px;">${currentBottomNews1.description}</span>
					</td>
				</c:forEach>
			</tr>
		</table>
		
		<table class="ThreeColumnNewsWithImageTable">
			<tr>
				<c:forEach items="#{newsManagedBean.dto.bottomNews}" var="currentBottomNews2" begin="4" end="6" varStatus="bottom2Status">
					<td>
						<img src="${currentBottomNews2.photo.url}" class="ThreeColumnImage" />
						<span class="NewsTitleHeader"><a href="javascript:goToNews('${currentBottomNews2.newsId}');">${currentBottomNews2.title}</a></span>
						<span class="BlockDisplay" style="width:200px;">${currentBottomNews2.description}</span>
					</td>
				</c:forEach>
			</tr>
		</table>
	</ui:define>
</ui:composition>